<template>
    <div>

        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in newlist" :key="item.id">
<!--                这一块是改的是新闻详情  前面有 : 因为后面加表达式 item.id-->
                <router-link :to="'/home/newsinfo/'+item.id">
<!--                    <router-link to="/home/newinfo/1">-->
<!--                                                            图片这个前面必须加 : -->
                    <img class="mui-media-object mui-pull-left" :src="item.img_url">
                    <div class="mui-media-body">
                        <h1>{{item.title}}</h1>
                        <p class='mui-ellipsis'>
<!--                                                        这个时间过滤器可以传参也可不传参-->
                        <span>发表时间：{{item.add_time | dataFormat('YYYY-MM-DD')}}</span>
                        <span>点击了：{{item.click}}次</span>
                        </p>
                    </div>
                </router-link>
            </li>

<!--           如果rusources 可以获取到数据 就不需要下面这两个-->
            <li class="mui-table-view-cell mui-media">
                    <router-link to="/home/newsinfo/1">
                    <img class="mui-media-object mui-pull-left" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584890711673&di=c714f9964e5128e83a12e1713aa7e120&imgtype=0&src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd4%2F1702%2Fbe%2Fc6593419617efdb5.jpg_r_720x480x95_10349266.jpg">
                    <div class="mui-media-body">
                        <h1>幸福</h1>
                        <p class='mui-ellipsis'>
                            <span>发表时间：{{ this.new | dataFormat('YYYY-MM_DD')}}</span>
                            <span>点击了:0次</span>
                        </p>
                    </div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584890711673&di=c714f9964e5128e83a12e1713aa7e120&imgtype=0&src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd4%2F1702%2Fbe%2Fc6593419617efdb5.jpg_r_720x480x95_10349266.jpg">
                    <div class="mui-media-body">
                        <h1>幸福</h1>
                        <p class='mui-ellipsis'>
                            <span>发表时间：2012-12-12 12:30:12</span>
                            <span>点击了：0次</span>
                        </p>
                    </div>
                </a>
            </li>

        </ul>
    </div>
</template>

<script>
import {Toast} from 'mint-ui'

    export default {
        data(){
            return{
                newlist:[], // 新闻列表
                new:'2012-12-12 12:30:12'
            }
        },
        created() {
           this.getNewlist()
        },
        methods:{
            getNewlist(){ // 获取新闻列表
                this.$http.get('/api/getnewslist').then(result=>{
                    if (result.body.status === 0){
                        //如果没失败
                        this.newlist = result.body.message;
                    }
                    else{
                        Toast('获取失败')
                    }
                })
            }
        },
        name: "NewListvue"
    }
</script>

<style lang="scss" scoped>
    .mui-table-view{
        li{
            h1{font-size: 14px; }// 设置h1字体的大小
            .mui-ellipsis{
                font-size: 12px; //设置下排字体大小
                color: #2ac845;
                display: flex; // 设置靠两边对齐
                justify-content: space-between;
            }
        }

    }

</style>